<template>
    <div class="warp">
        <div style="width: 1000px;margin: 0 auto;padding: 20px 0;">
            <div style="display: flex;flex-direction: column;align-items: start;background-color: #fff;padding: 20px;">
                <span style="font-weight: bold;font-size: 28px;color: #333;line-height: 36px;padding-bottom: 5px;">
                    {{ data.title }}
                </span>
                <p style="font-size: 16px;color: #888;line-height: 22px;"><span v-if="data.source !=undefined && data.source != ''">来源： {{ data.source }} </span> 发布时间：{{ data.createdAt }}</p>
                <el-divider style="margin: 15px 0;" />
                <div class="content" style="font-size: 16px;line-height: 24px; flex: 1;" v-html="data.content"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:'',
            data: {},
        }
    },
    created() {
        this.getData()
    },
    methods: {
        getData(){
            this.crud.get(`/index-article/${this.$route.params.id}`).then(res => {
                this.data = res.data.data
            })
        }
    }
}

</script>
<style scoped>
.warp{
    background-color: #f6f6f6;
}
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.el-divider--horizontal {
    margin: 20px 0;    background-color: #006400;
}

.el-row {
    margin: 0px !important;
    width: 100%;
}

.personal-info-box {
    overflow: hidden;

    .personal-info-ul {
        list-style: none;

        .personal-info-li {
            padding-bottom: 10px;

            .personal-info-li-title {
                display: inline-block;
                color: var(--el-text-color-secondary);
                text-decoration: none;
            }

            & a:hover {
                color: var(--el-color-primary);
                cursor: pointer;
            }
        }
    }

    .personal-edit-title {
        position: relative;
        padding-left: 10px;
        color: var(--el-text-color-regular);
        line-height: 22px;

        &::after {
            content: '';
            width: 4px;
            height: 18px;
            line-height: 22px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--el-color-primary);
            border-radius: 2px;
        }
    }
}

.line1 {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 超出容器部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}
.content{
    img{
        max-width:960px
    }
}
</style>
